<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
    >
      <el-form-item label="归属项目id" prop="belongingProject">
        <el-input
            v-model="queryParams.belongingProject"
            placeholder="请输入归属项目id"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="期望到期时间" prop="eTime">
        <el-date-picker
            v-model="queryParams.eTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="单据日期" prop="documentDate">
        <el-date-picker
            v-model="queryParams.documentDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="单据编号" prop="documentNumber">
        <el-input
            v-model="queryParams.documentNumber"
            placeholder="请输入单据编号"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="条码" prop="barCode">
        <el-input
            v-model="queryParams.barCode"
            placeholder="请输入条码"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="商品类型" prop="productType">
        <el-select
            v-model="queryParams.productType"
            placeholder="请选择商品类型"
            clearable
            class="!w-240px"
        >
          <el-option label="请选择字典生成" value=""/>
        </el-select>
      </el-form-item>
      <el-form-item label="类别" prop="category">
        <el-input
            v-model="queryParams.category"
            placeholder="请输入类别"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="货物名称" prop="gname">
        <el-input
            v-model="queryParams.gname"
            placeholder="请输入货物名称"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="型号" prop="model">
        <el-input
            v-model="queryParams.model"
            placeholder="请输入型号"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="品牌" prop="brand">
        <el-input
            v-model="queryParams.brand"
            placeholder="请输入品牌"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="单位" prop="unit">
        <el-input
            v-model="queryParams.unit"
            placeholder="请输入单位"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="数量" prop="number">
        <el-input
            v-model="queryParams.number"
            placeholder="请输入数量"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="主要技术参数" prop="technicalParameter">
        <el-input
            v-model="queryParams.technicalParameter"
            placeholder="请输入主要技术参数"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="金额" prop="price">
        <el-input
            v-model="queryParams.price"
            placeholder="请输入金额"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="备注" prop="notes">
        <el-input
            v-model="queryParams.notes"
            placeholder="请输入备注"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="申请人" prop="applicantName">
        <el-input
            v-model="queryParams.applicantName"
            placeholder="请输入申请人"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="申请日期" prop="applicationDate">
        <el-date-picker
            v-model="queryParams.applicationDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="部门负责人审核" prop="bexamine">
        <el-input
            v-model="queryParams.bexamine"
            placeholder="请输入部门负责人审核"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="部门负责人审核时间" prop="bexamineDate">
        <el-date-picker
            v-model="queryParams.bexamineDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="仓库管理审核" prop="cexamine">
        <el-input
            v-model="queryParams.cexamine"
            placeholder="请输入仓库管理审核"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="仓库管理审核时间" prop="cexamineDate">
        <el-date-picker
            v-model="queryParams.cexamineDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="批号" prop="batchNumber">
        <el-input
            v-model="queryParams.batchNumber"
            placeholder="请输入批号"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="1.项目物资2.零星物资" prop="pType">
        <el-select
            v-model="queryParams.pType"
            placeholder="请选择1.项目物资2.零星物资"
            clearable
            class="!w-240px"
        >
          <el-option label="请选择字典生成" value=""/>
        </el-select>
      </el-form-item>
      <el-form-item label="是否进入出库流程（1进入）" prop="isOut">
        <el-input
            v-model="queryParams.isOut"
            placeholder="请输入是否进入出库流程（1进入）"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="部门审核不通过原因" prop="bexamineNo">
        <el-input
            v-model="queryParams.bexamineNo"
            placeholder="请输入部门审核不通过原因"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="仓库审核不通过原因" prop="cexamineNo">
        <el-input
            v-model="queryParams.cexamineNo"
            placeholder="请输入仓库审核不通过原因"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="规格" prop="specif">
        <el-input
            v-model="queryParams.specif"
            placeholder="请输入规格"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="子件id" prop="sonId">
        <el-input
            v-model="queryParams.sonId"
            placeholder="请输入子件id"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="父id" prop="parentId">
        <el-input
            v-model="queryParams.parentId"
            placeholder="请输入父id"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="特殊先入库数据——2（流程不完整''，先入库" prop="initialData">
        <el-input
            v-model="queryParams.initialData"
            placeholder="请输入特殊先入库数据——2（流程不完整''，先入库"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="1—备货" prop="bh">
        <el-input
            v-model="queryParams.bh"
            placeholder="请输入1—备货"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="1作废" prop="isCancel">
        <el-input
            v-model="queryParams.isCancel"
            placeholder="请输入1作废"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
            v-model="queryParams.createTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px"/>
          重置
        </el-button>
        <el-button
            type="primary"
            plain
            @click="openForm('create')"
            v-hasPermi="['purchase:project-order:create']"
        >
          <Icon icon="ep:plus" class="mr-5px"/>
          新增
        </el-button>
        <el-button
            type="success"
            plain
            @click="handleExport"
            :loading="exportLoading"
            v-hasPermi="['purchase:project-order:export']"
        >
          <Icon icon="ep:download" class="mr-5px"/>
          导出
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="归属项目id" align="center" prop="belongingProject"/>
      <el-table-column
          label="期望到期时间"
          align="center"
          prop="eTime"
          :formatter="dateFormatter"
          width="180px"
      />
      <el-table-column
          label="单据日期"
          align="center"
          prop="documentDate"
          :formatter="dateFormatter"
          width="180px"
      />
      <el-table-column label="单据编号" align="center" prop="documentNumber"/>
      <el-table-column label="条码" align="center" prop="barCode"/>
      <el-table-column label="商品类型" align="center" prop="productType"/>
      <el-table-column label="类别" align="center" prop="category"/>
      <el-table-column label="货物名称" align="center" prop="gname"/>
      <el-table-column label="型号" align="center" prop="model"/>
      <el-table-column label="品牌" align="center" prop="brand"/>
      <el-table-column label="单位" align="center" prop="unit"/>
      <el-table-column label="数量" align="center" prop="number"/>
      <el-table-column label="主要技术参数" align="center" prop="technicalParameter"/>
      <el-table-column label="金额" align="center" prop="price"/>
      <el-table-column label="备注" align="center" prop="notes"/>
      <el-table-column label="申请人" align="center" prop="applicantName"/>
      <el-table-column
          label="申请日期"
          align="center"
          prop="applicationDate"
          :formatter="dateFormatter"
          width="180px"
      />
      <el-table-column label="部门负责人审核" align="center" prop="bexamine"/>
      <el-table-column
          label="部门负责人审核时间"
          align="center"
          prop="bexamineDate"
          :formatter="dateFormatter"
          width="180px"
      />
      <el-table-column label="仓库管理审核" align="center" prop="cexamine"/>
      <el-table-column
          label="仓库管理审核时间"
          align="center"
          prop="cexamineDate"
          :formatter="dateFormatter"
          width="180px"
      />
      <el-table-column label="批号" align="center" prop="batchNumber"/>
      <el-table-column label="1.项目物资2.零星物资" align="center" prop="pType"/>
      <el-table-column label="是否进入出库流程（1进入）" align="center" prop="isOut"/>
      <el-table-column label="部门审核不通过原因" align="center" prop="bexamineNo"/>
      <el-table-column label="仓库审核不通过原因" align="center" prop="cexamineNo"/>
      <el-table-column label="规格" align="center" prop="specif"/>
      <el-table-column label="子件id" align="center" prop="sonId"/>
      <el-table-column label="父id" align="center" prop="parentId"/>
      <el-table-column label="特殊先入库数据——2（流程不完整''，先入库" align="center" prop="initialData"/>
      <el-table-column label="1—备货" align="center" prop="bh"/>
      <el-table-column label="1作废" align="center" prop="isCancel"/>
      <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          :formatter="dateFormatter"
          width="180px"
      />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
              link
              type="primary"
              @click="openForm('update', scope.row.id)"
              v-hasPermi="['purchase:project-order:update']"
          >
            编辑
          </el-button>

          <el-button
              link
              type="danger"
              @click="handleDelete(scope.row.id)"
              v-hasPermi="['purchase:project-order:delete']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
<!--  <ProjectOrderForm ref="formRef" @success="getList"/>-->
</template>

<script setup lang="ts">
import {dateFormatter} from '@/utils/formatTime'
import download from '@/utils/download'
import {ProjectOrderApi, ProjectOrderVO} from '@/api/werp/purchase/apply'
// import ProjectOrderForm from './ProjectOrderForm.vue'

/** 项目物资申请单 列表 */
defineOptions({name: 'ProjectOrder'})

const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<ProjectOrderVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  belongingProject: undefined,
  eTime: [],
  documentDate: [],
  documentNumber: undefined,
  barCode: undefined,
  productType: undefined,
  category: undefined,
  gname: undefined,
  model: undefined,
  brand: undefined,
  unit: undefined,
  number: undefined,
  technicalParameter: undefined,
  price: undefined,
  notes: undefined,
  applicantName: undefined,
  applicationDate: [],
  bexamine: undefined,
  bexamineDate: [],
  cexamine: undefined,
  cexamineDate: [],
  batchNumber: undefined,
  pType: undefined,
  isOut: undefined,
  bexamineNo: undefined,
  cexamineNo: undefined,
  specif: undefined,
  sonId: undefined,
  parentId: undefined,
  initialData: undefined,
  bh: undefined,
  isCancel: undefined,
  createTime: [],
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await ProjectOrderApi.getProjectOrderPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await ProjectOrderApi.deleteProjectOrder(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {
  }
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await ProjectOrderApi.exportProjectOrder(queryParams)
    download.excel(data, '项目物资申请单.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
